<template>
  <div>
    <header class="header">
      <el-row>
        <el-col :span="12">
          <div class="grid-content header_title">
            我的
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content right">
            <span class="iconfont icon-tongzhi1"></span>
            <span class="iconfont icon-shezhi"></span>
          </div>
        </el-col>
      </el-row>
    </header>
    <section class="user_login">
      <router-link to="login">
        <div class="ava"></div>
        <div class="login">
          <p class="p1">立即登录</p>
          <p class="p2">登录后可享受更多特权</p>
          <div class="gt iconfont icon-xiala1"></div>
        </div>
      </router-link>
    </section>
    <div class="body_area">
      <section class="coins">
        <div class="coin"><span class="iconfont icon-renminbi"></span><span class="coin_text">钱包</span></div>
        <div class="coin"><span class="iconfont icon-hongbao"></span><span class="coin_text">红包</span></div>
        <div class="coin"><span class="iconfont icon-jinbi1"></span><span class="coin_text">金币</span></div>
      </section>
      <section class="collection"><span class="iconfont icon-xin"></span>我的收藏</section>
      <section class="coins_mall"><span class="iconfont icon-gouwudai"></span>金币商城</section>
      <section class="custom_service"><span class="iconfont icon-kefu"></span>我的客服</section>
      <section class="cooperation"><span class="iconfont icon-jiamengba"></span>加盟合作</section>
    </div>
  </div>
</template>

<script>
  export default {
    metaInfo:{
      meta:[
        {'theme-color': '#0093FF'}
      ]
    }
  }
</script>

<style scoped lang="scss">
  $color: rgba(0, 147, 255, 1);
  $color-a: rgba(0, 147, 255, .8);

  .header {
    background-color: $color;
    margin-right: -1px;

    .grid-content {
      min-height: 36px;
    }

    .header_title {
      line-height: 36px;
      padding-left: 10px;
    }

    .right {
      text-align: right;
      vertical-align: middle;

      span {
        display: inline-block;
        padding: 0 20px;
        margin-top: 6px;
      }

      .iconfont {
        font-size: 2rem;
        font-weight: bolder;
      }
    }
  }

  .user_login {
    height: 150px;
    overflow: auto;
    position: relative;
    background-color: $color;

    .ava {
      width: 80px;
      height: 80px;
      position: absolute;
      border-radius: 50%;
      background-color: #fff;
      top: 50%;
      left: 30px;
      transform: translateY(-50%);
    }

    .login {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 5px;
      width: calc(100% - 80px - 30px - 20px);

      p {
        line-height: 32px;
      }

      .p1 {
        font-weight: bold;
        font-size: 1.8rem;
        color: #fff;
      }

      .p2 {
        font-size: 1.2rem;
        color: #fff;
      }

      .gt {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 20px;
        width: 30px;
        font-size: 4rem;
        color: #fff;
      }
    }
  }

  .user_login:active {
    background-color: $color-a;
  }

  .body_area{
    height: 100%;
    background-color: rgba(240,240,240,.5);
  }
  
  .coins {
    overflow: hidden;
    background-color: #fff;
    border-bottom: .5px silver solid;


    .coin {
      float: left;
      width: 33.334%;
      text-align: center;
      padding: 20px 0;
      border-left: .5px silver solid;
      border-right: .5px silver solid;

      span {
        display: inline-block;
        width: 95%;
      }

      .iconfont {
        font-size: 3rem;
      }

      .coin_text {
        font-size: 1.4rem;
      }

      .icon-renminbi {
        color: rgba(0, 147, 255, 1)
      }

      .icon-hongbao {
        color: red;
      }

      .icon-jinbi1 {
        color: gold;
      }
    }
  }

  .collection, .coins_mall, .custom_service, .cooperation {
    padding: 10px;
    margin: 10px 0;
    background-color: #fff;
    border-top: .5px silver solid;
    border-bottom: .5px silver solid;

    .iconfont{
      margin: 0 20px 0 10px;
    }

    .icon-xin{
      color: palevioletred;
    }

    .icon-gouwudai{
      color:green;
    }

    .icon-kefu{

    }
    .icon-jiamengba{
      color:blue;
    }
  }

  .collection {

  }

  .coins_mall {
  }

  .custom_service {
  }

  .cooperation {
  }
</style>
